import type {UnwrapRef} from "vue";
import {requireImg} from "@utils/common/Image";
import type {StoreInterface} from "@/typings/store";
import type {DesktopInterface} from "@/typings/desktop";

/**
 * DesktopShortcut 桌面快捷方式组件
 */
export const DesktopShortcut = (props: {
  appShortcuts: UnwrapRef<StoreInterface.AppShortcutMap>;
  onOpenApp: UnwrapRef<(item: DesktopInterface.AppShortcut) => void>;
}) => (
  <main class="absolute right-0 inset-y-0 h-[92vh] flex flex-col flex-wrap-reverse justify-start items-end">
    {Object.values(props.appShortcuts)
      .sort((a1, a2) => a1.sort - a2.sort)
      .filter(item => item.isInDeskTop)
      .map((item: any) => {
        return (
          <div
            class="w-28 h-28 mr-1.5 my-0.5 cursor-pointer flex flex-col justify-center items-center"
            onDblclick={e => {
              e.stopPropagation();
              props.onOpenApp(item);
            }}
          >
            <div
              style={{ backgroundImage: "url(" + requireImg(item.icon) + ")" }}
              class="rounded-[16px] w-14 h-14 bg-no-repeat bg-cover"
            ></div>
            <div
              class="text-[12px] text-white font-bold mt-2 whitespace-nowrap overflow-ellipsis overflow-hidden"
              v-text={item.title}
            ></div>
          </div>
        );
      })}
  </main>
);
